<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<style>
		/*书写css*/
		/*
		选择标签{
	
		}
		*/
		/*清除样式 *代表所有标签*/
		/*
		*{
			margin:0px;
			padding:0px;
		}*/
		html
		{
			height:100%;
		}
		body 
		{
			overflow-y:hidden;
			height:100%;
			background:url('img/bg.jpg');
			background-size:100% 100%;
		}
		div{
			width:400px;
			height:100%;
			position:fixed;
			left:50%;
			transform:translateX(-50%);
			
		}
		.bracket{
			position: absolute;
			top:220px;
			left:50%;
			transform:translateX(-50%);
			
		}
		main{
			width:400px;
			height:400px;
			background:url('img/fsw.png');
			background-size:100% 100%;

			position: absolute;
			top:20px;
			/*left:50%;
			transform:translateX(-50%);*/
			animation:circle 10s infinite linear;

		}

		.happy{
			position:absolute;
			top:140px;
			left:50%;
			transform:translateX(-50%);
		}
		main img{
			width: 60px;
			position: absolute;
			animation:circle1 10s infinite linear;
			transform-origin:center 0px;
		}

		main img:nth-of-type(1){
			left:-11px;
			top:193px;
		}
		main img:nth-of-type(2){
			left:43px;
			top:67px;
		}
		main img:nth-of-type(3){
			left:173px;
			top:15px;
		}
		main img:nth-of-type(4){
			left:305px;
			top:66px;
		}
		main img:nth-of-type(5){
			left:357px;
			top:189px;
		}
		main img:nth-of-type(6){
			left:38px;
			top:317px;
		}
		main img:nth-of-type(7){
			left:317px;
			top:324px;
		}
		main img:nth-of-type(8){
			left:176px;
			top:376px;
		}

		@keyframes circle{
			0%{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(360deg);
			}
		}
		@keyframes circle1{
			0%{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(-360deg);
			}
		}


	</style>
<body>
	<div>
		<img src="img/bracket.png" alt="" class="bracket" >
		<main>
			<img src="img/boy.png" alt="">
			<img src="img/dog.png" alt="">
			<img src="img/girl.png" alt="">
			<img src="img/hairboy.png" alt="">
			<img src="img/mimi.png" alt="">
			<img src="img/mudog.png" alt="">
			<img src="img/shamegirl.png" alt="">
			<img src="img/girls.png" alt="">
		</main>
		<img src="img/happy.png" alt=""  class="happy">
		
	</div>
	
	
</body>
</html>